<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>办件进度详情列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			.mui-bar-nav~.mui-content{padding:0;position:absolute;width:7.5rem;height:100%;top:0;left:0;z-index:1000;background-color:transparent;}
			.mui-bar-nav{height:1.05rem;}
			.mui-icon-closeempty{font-size:.8rem;position:absolute;top:.14rem;left:.2rem;color:#fff;}
			/*切换菜单*/
			.mui-slider{position:relative;}
			.mui-segmented-control{width:4rem;overflow:hidden;margin:.16rem auto;background:transparent;border-radius:.1rem;height:.6rem;line-height:.6rem;margin-bottom:.19rem;border:1px solid #fff;overflow:hidden;}
			.mui-segmented-control .mui-control-item{line-height:.7rem;font-size:.3rem;color:#fff;}
			.mui-segmented-control .mui-control-item.mui-active{background:#fff;color:#104ffc;}
	        /*基本信息*/
	        .control_cont{width:100%;float:left;overflow:auto;}
	        .basic_info{width:100%;float:left;padding:0;margin:0;}
		    .basic_info>li{width:100%;height:.85rem;line-height:.85rem;border-bottom:1px solid #e5e5e5;background:#fff;float:left;}
		    .basic_info>li>label,.basic_info>li>a>label{width:2.4rem;float:left;text-align:left;font-size:.28rem;color:#999;box-sizing:border-box;padding-left:.25rem;}
		    .basic_info>li>span,.basic_info>li>a>span{font-size:.28rem;color:#333;width:3.7rem;float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:1rem;}
			.work_name{width:100%;padding:.25rem .2rem;box-sizing:border-box;background:#fff;margin-bottom:.1rem;float:left;}
			.work_name>img{width:.82rem;height:.86rem;float:left;margin-right:.25rem;}
			.work_name>h5{width:5rem;float:left;line-height:.35rem;font-size:.32rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;margin:.05rem 0 0 0;}
			.work_name>.file_num{width:5rem;float:left;line-height:.3rem;font-size:.28rem;color:#666;margin-top:.12rem;}
			.mui-icon-arrowright{float:right;color:#adadad;font-size:.28rem;margin-top:-.3rem;}
			.mui-icon-arrowright:before{font-size:.36rem;float:right;margin-top:-.04rem;}
			.blue{color:#104ffc;}
			.basic_info>li>a{display:block;width:100%;float;left;}
			.basic_info>li .mui-icon-arrowright{margin:.17rem 0 0 .05rem;float:left;}
			.choose{width:1.9rem;float:left;color:#17bb13;}
		    .choose>b{width:.3rem;height:.3rem;float:left;margin-right:.1rem;background:url(../../images/work/zbxz-@2x.png) no-repeat;background-size:100% 100%;margin-top:.28rem;}
	        .choose>.actb{background:url(../../images/jindu/result2x.png) no-repeat;background-size:100% 100%;}
			.control_cont h6{width:100%;float:left;height:.7rem;line-height:.7rem;font-size:.3rem;color:#333;margin:0}
			.control_cont h6>img{width:.34rem;float:left;margin:.178rem .13rem 0 .3rem;}
			.basic_info>li>.cailiao{color:#333;width:6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
			.basic_info>li>span>.show{display:block;color:#104ffc;border:1px solid #104ffc;border-radius:.3rem;padding:0 .25rem;font-size:.3rem;float:right;height:.5rem;line-height:.5rem;margin-top:.172rem;}
			.basic_info>li>.gray{float:right;color:#999;font-size:.3rem;text-align:right;}
			/*办理过程*/
			.work_process{width:100%;float:left;background:#fff;margin-top:.1rem;padding:.3rem 0;}
			.work_process>ul{padding:.2rem 0;width:6.7rem;float:left;border-left:1px dotted #cccccc;margin-left:.57rem;}
			.work_process>ul>li{width:100%;float:left;position:relative;min-height:1.5rem;}
			.work_process>ul>li>span{float:left;width:6.25rem;margin-left:.45rem;position:relative;}
			.work_process>ul>li>.process_tit{font-size:.32rem;color:#333;line-height:.52rem;margin-bottom:.3rem;}
			.work_process>ul>li>.process_tit .process_icon{width:.82rem;height:.88rem;position:absolute;top:-.18rem;left:-.87rem;background:url(../../images/jindu/ys01.png) no-repeat;background-size:100% auto;}
			.work_process>ul>li>.process>i{width:.1rem;height:.1rem;border-radius:50%;float:left;background:#666;margin:.14rem .1rem 0 0rem;display:block;}
			.work_process>ul>li>.process>span{color:#666;font-size:.28rem;line-height:.35rem;margin-bottom:.15rem;float:left;max-width:5.9rem;}
			.work_process>ul>li>.process_result{color:#333;font-size:.3rem;}
			.work_process>ul>li>.process_result>.result_iocn{width:.3rem;height:.32rem;float:left;background:url(../../images/jindu/result2x.png) no-repeat;background-size:100% 100%;margin:.06rem .1rem 0 -.1rem;}
			.work_process>ul>li>.process .cir{width:.22rem;height:.22rem;position:absolute;top:.07rem;left:-.58rem;background:url(../../images/jindu/gray_cir.png) no-repeat;background-size:100% 100%;}
			.work_process>ul>li .line{width:6.5rem;float:right;background:#eeeeee;padding:0;height:.06rem;margin:.25rem -.24rem .25rem 0;}
			.work_process>ul>.green>.process_tit{color:#00c63d;}
			.work_process>ul>.green>.process_result{color:#00c63d;}
			.work_process>ul>.blue>.process_result{color:#2486ff;}
			.work_process>ul>.blue>.process_result>.result_iocn{color:#2486ff;background:url(../../images/jindu/time2x.png) no-repeat;background-size:100% 100%;}
			.work_process>ul>.list02>.process_tit .process_icon{background:url(../../images/jindu/gray_sl2x.png) no-repeat;background-size:100% auto;height:.95rem;top:-.23rem;left:-.95rem;width:.95rem}
			.work_process>ul>.list03>.process_tit .process_icon{background:url(../../images/jindu/gray_sc2x.png) no-repeat;background-size:100% auto;height:.97rem;top:-.23rem;left:-.95rem;width:.95rem}
			.work_process>ul>.list04>.process_tit .process_icon{background:url(../../images/jindu/gray_jd2x.png) no-repeat;background-size:100% auto;height:.97rem;top:-.23rem;left:-.95rem;width:.95rem}
			.work_process>ul>.list05>.process_tit .process_icon{background:url(../../images/jindu/gray_bj2x.png) no-repeat;background-size:100% auto;height:.97rem;top:-.23rem;left:-.95rem;width:.95rem}
			.work_process>ul>.list02.blue>.process_tit .process_icon{background:url(../../images/jindu/blue_sl2x.png) no-repeat;background-size:100% auto;height:.95rem;top:-.2rem;left:-.92rem;width:.9rem}
			.work_process>ul>.list03.blue>.process_tit .process_icon{background:url(../../images/jindu/blue_sc2x.png) no-repeat;background-size:100% auto;height:.97rem;top:-.2rem;left:-.92rem;width:.9rem}
			.work_process>ul>.list04.blue>.process_tit .process_icon{background:url(../../images/jindu/blue_jd2x.png) no-repeat;background-size:100% auto;height:.97rem;top:-.2rem;left:-.92rem;width:.9rem}
			.work_process>ul>.list05.blue>.process_tit .process_icon{background:url(../../images/jindu/blue_bj2x.png) no-repeat;background-size:100% auto;height:.97rem;top:-.18rem;left:-.92rem;width:.9rem}
			.work_process>ul>.list02.green>.process_tit .process_icon{background:url(../../images/jindu/green_sl2x.png) no-repeat;background-size:100% auto;height:.95rem;top:-.18rem;left:-.92rem;width:.9rem}
			.work_process>ul>.list03.green>.process_tit .process_icon{background:url(../../images/jindu/green_sc2x.png) no-repeat;background-size:100% auto;height:.97rem;top:-.19rem;left:-.92rem;width:.9rem}
			.work_process>ul>.list04.green>.process_tit .process_icon{background:url(../../images/jindu/green_jd2x.png) no-repeat;background-size:100% auto;height:.97rem;top:-.18rem;left:-.92rem;width:.9rem}
			.work_process>ul>.list05.green>.process_tit .process_icon{background:url(../../images/jindu/green_bh2x.png) no-repeat;background-size:100% auto;height:.97rem;top:-.18rem;left:-.92rem;width:.9rem}
			.basic_info>li>.show_ifo{width: 1.2rem;margin-right: .3rem;float: right;margin-left:0;}
			
		</style>
	</head>
	<body>
		<!--头部-->
		<div class="mui-bar mui-bar-nav" id='header'></div>
		<div class="mui-content" id='app'>
			<div class="mui-slider">
				<a class="mui-icon mui-icon-closeempty mui-action-back" id='back'></a>
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1">
						基本信息
					</a>
					<a class="mui-control-item" href="#item2">
						办理过程
					</a>
				</div>
			<div class="control_cont">
				<div id="item1" class="mui-control-content mui-active">
					<div class="work_name">
						<img src="../../images/jindu/already_file.png">
						<h5>{{zwfwCaseVo.serviceName}}</h5>
						<div class="file_num">办理编号：<span class="blue">{{zwfwCaseVo.caseNum}}</span></div>
						<i class="mui-icon mui-icon-arrowright" :id='zwfwCaseVo.serviceId'>详情</i>
					</div>
					<h6><img src="../../images/jindu/sq2x.png">办件申请信息</h6>
					<ul class="basic_info">
					 	<li>
					 		<label>申请人/申请单位</label>
					 		<span>{{zwfwCaseVo.applyName}}</span>
					 	</li>
					 	<li>
					 		<label>申请时间</label>
					 		<span>{{applyTime}}</span>
					 	</li>
					 	<!--<li>
					 		<a>
					 			<label>收件凭证</label>
					 		    <span></span>
					 		</a>
					 	</li>-->
					 	<li id='slNotice'>
					 		<a>
					 			<label>受理通知书</label>
					 			<template v-if="slNotice != ''">
					 		    	<span><span class="blue" :id='slNotice.oid' :name='slNotice.extensionName'>下载</span></span>
					 			</template>
					 		</a>
					 	</li>
				    </ul>
				    <h6><img src="../../images/jindu/cail2x.png" style="margin-top:.175rem;">申请材料信息</h6>
				    <ul class="basic_info">
				    	<template v-if="material_show" v-for="matertial in zwfwCaseMaterialList">
				    		<li v-if="matertial.isNetCase">
				    			<label class="cailiao">{{matertial.materialName}}</label>
						 		<template v-if="matertial.isWindowSubmit === 'Y'">
						 			<span class="show_ifo gray">窗口提交</span>
						 		</template>
						 		<template v-else>
							 		<span class="show_ifo">已收取</span>
						 		</template>
				    		</li>
				    		<li v-else>
						 		<label class="cailiao">{{matertial.sxServiceMaterial.materialName}}</label>
						 		<template v-if="matertial.collectionFlag === '1'">
						 			<span class="show_ifo gray">未提供</span>
						 		</template>
						 		<template v-else>
							 		<span class="show_ifo"><a class="show" :id="matertial.caseMaterialOid">查看</a></span>
						 		</template>
						 	</li>
				    	</template>
				    </ul>
				    <h6><img src="../../images/jindu/zt2x.png">办件状态信息</h6>
				    <ul class="basic_info">
					 	<li>
					 		<a>
						 		<label>当前办理状态</label>
						 		<span>
						 			<span class="choose">
						 				<template v-if="zwfwCaseVo.blStatus === '0'"><b class="actb"></b>暂存</template>
						 				<template v-else-if="zwfwCaseVo.blStatus === '1'"><b class="actb"></b>已申报</template>
						 				<template v-else-if="zwfwCaseVo.blStatus === '2'"><b class="actb"></b>办理中</template>
						 				<template v-else-if="zwfwCaseVo.blStatus === '3'"><b class="actb"></b>已办结</template>
						 				<template v-else-if="zwfwCaseVo.blStatus === '4'"><b class="actb"></b>不通过</template>
						 				<template v-else-if="zwfwCaseVo.blStatus === '5'"><b class="actb"></b>补齐补正</template>
						 				<template v-else-if="zwfwCaseVo.blStatus === '6'"><b class="actb"></b>预审通过</template>
						 				<template v-else-if="zwfwCaseVo.blStatus === '7'"><b class="actb"></b>不予受理</template>
						 				<template v-else-if="zwfwCaseVo.blStatus === '8'"><b class="actb"></b>撤销申请</template>
						 			</span>
						 			
						 			<template v-if="zwfwCaseVo.blStatus === '3' || zwfwCaseVo.blStatus === '4' || zwfwCaseVo.blStatus === '7' ">
						 				<span style="float:right;color:#17bb13;" class="show_pj"><a :id="zwfwCaseVo.caseId">评价</a></span>
						 			</template>
						 			<template v-else></template>
						 		</span>
					 		</a>
					 	</li>
					 	<li>
					 		<label>受理时间</label>
					 		<span>{{blTime}}</span>
					 	</li>
					 	<li>
					 		<label>受理经办人</label>
					 		<span>{{zwfwCaseVo.jbrName}}</span>
					 	</li>
					 	<li>
					 		<label>审批单位</label>
					 		<span>{{zwfwCaseVo.organName}}</span>
					 	</li>
					 	<li class="mt10">
					 		<label>办结时间</label>
					 		<span>{{bjTime}}</span>
					 	</li>
				    </ul>
				    <!--<h6><img src="../../images/jindu/result2x.png">办件结果信息</h6>-->
				</div>
				<div id="item2" class="mui-control-content">
					<div class="work_name">
						<img src="../../images/jindu/already_file.png">
						<h5>{{zwfwCaseVo.serviceName}}</h5>
						<div class="file_num">办理编号：<span class="blue">{{zwfwCaseVo.caseNum}}</span></div>
						<i class="mui-icon mui-icon-arrowright" :id='zwfwCaseVo.serviceId'>查看指南</i>
					</div>
					<div class="work_process">
						<ul>
							<template v-if='auditRec_show'  v-for="auditRecVo in auditRecVoList">
								<li :class="'list0'+auditRecVo.auditStatus +' green'">
									<span class="process_tit">
										<i class="process_icon"></i>
										{{auditRecVo.stepName}} 
									</span>
									<span class="process"><i></i><span>操作人：{{auditRecVo.userName}}</span><b class="cir"></b></span>
									<span class="process"><i></i><span>人员工号：{{auditRecVo.userNo}}</span></span>
									<span class="process"><i></i><span>开始时间：{{auditRecVo.startBlTime}}</span></span>
									<span class="process"><i></i><span>审查意见：{{auditRecVo.auditOpinion}}</span></span>
									<span class="process_result"><i class="result_iocn"></i>{{auditRecVo.auditStatusName}}</span>
									<p class="line"></p>
								</li>
							</template>
							<template v-else>
								暂无办理过程信息......
							</template>
						</ul>
					</div>
				</div>
			</div>
			</div>
		</div>
		<script>
			function my_immersed(immersed){
				document.getElementById("header").style.height = (54 + immersed) + 'px';
				document.getElementById("header").style.paddingTop = immersed + 'px';
				document.getElementById("app").style.paddingTop = immersed + 'px';
			}
		</script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/jquery2.2.4.min.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript" src="../../js/file.js" ></script>
		<script>
			$('.control_cont').height($(window).height()-$('.mui-bar-nav').height()-immersed);
			
			mui.init();
			var caseNum = utils.getUrlParam('caseNum');//从上一个页面获取的办件编号
			var user = getUser();//注册用户
			
			mui.plusReady(function(){
				closeWaitingAndShowView(); 
				//重写back
				mui.back = function(){
					plus.webview.currentWebview().close('zoom-fade-in',300);
				}
			});
			
			var vm = new Vue({
			  el: '#app',
			  data: {
			  	zwfwCaseVo:'',
			  	applyTime:'',
			  	blTime:'',
			  	bjTime:'',
			  	auditRec_show:false,//办理过程结果是否展示
			  	auditRecVoList:[{stepName:'',auditStatus:'',auditStatusName:'',auditOpinion:'',userName:'',userNo:'',startBlTime:'',endBlTime:'',blTime:''}],
			  	material_show:false,//申请材料是否展示
			  	zwfwCaseMaterialList:[],
			  	slNotice:''
			  }
			});  
			
			var serviceOid = "";
			//ajax 办件查询详细信息
			var param = 'caseNum='+caseNum;
			utils.ajax('appHttpService/appZwfwCaseInfo.do', function(data) {
				data = JSON.parse(data);
				if(data.code == '1'){
					mui.toast('系统内部错误');
					return;
				}else{
					var zwfwCaseVo = JSON.parse(data.zwfwCaseVo);
					if(zwfwCaseVo != null){
						vm.zwfwCaseVo = zwfwCaseVo;
						vm.applyTime = utils.format(zwfwCaseVo.applyTime,'yyyy-MM-dd HH:mm:ss');
						vm.blTime =  utils.format(zwfwCaseVo.blTime,'yyyy-MM-dd HH:mm:ss');
						vm.bjTime =  utils.format(zwfwCaseVo.bjTime,'yyyy-MM-dd HH:mm:ss');
						
						serviceOid = zwfwCaseVo.serviceId;
					}
		            //办理过程结果list
		            if( data.auditRecVoList ){
		            	var auditRecVoList = JSON.parse(data.auditRecVoList); 
						if(auditRecVoList != null){
							var size = auditRecVoList.length;
							if(size>0){
								vm.auditRec_show = true;
								vm.auditRecVoList = auditRecVoList;
							}
						}
		            }else{
		            	vm.auditRec_show = false;
		            }
					
					//申请材料list
					if( data.zwfwCaseMaterialList ){
						var zwfwCaseMaterialList = data.zwfwCaseMaterialList; 
						if(typeof(data.zwfwCaseMaterialList) == 'string'){
							zwfwCaseMaterialList = JSON.parse(zwfwCaseMaterialList); 
						}
						if(zwfwCaseMaterialList != null){
							var size = zwfwCaseMaterialList.length;
							if(size>0){
								vm.material_show = true;
								vm.zwfwCaseMaterialList = zwfwCaseMaterialList;
							}
						}
					}
					
					if(data.slNotice != undefined){
						slNotice = data.slNotice;						
					}
				}
			}, param);
			
			mui("body").on('tap', '.work_name i', function() { 
				var serviceOid = this.getAttribute("id");
				if(serviceOid != null){
					var hsw = openNewWin('_www/src/work/bszn_info.html?serviceOid=' + serviceOid,{bounce:'none'}, 'bszn_info');
					mui.fire(hsw,'getDetail',{serviceOid:serviceOid});
				}
				
			});
			
			//材料样表下载
			document.getElementById("slNotice").addEventListener('tap',function(){
				var materialOid = this.getAttribute('id');
				var fileType = this.getAttribute('name');
				var url = utils.HOST + 'appHttpService/appDownLoadFile.do?materialOid=' + materialOid;
				
				//开始下载
				showOrDown(url,materialOid,null,fileType,function(path){
					openDir(path);
				})
				
			});
			
			//查看申请材料
			mui(".basic_info").on('tap', '.show_ifo a', function() { 
				var caseMaterialOid = this.getAttribute("id");
				if(caseMaterialOid != null && caseMaterialOid != undefined && caseMaterialOid != ''){
					showTemplates('viewZwfwMaterial.html','查看材料','_www/src/work/viewZwfwMaterial.html?caseMaterialOid='+caseMaterialOid);
				}
				
			});
			
			//查看申请材料
			mui("body").on('tap', '.show_pj a', function() { 
				var caseId = this.getAttribute("id");
				if(caseId != null && caseId != undefined && caseId != ''){
					var param = 'caseId='+caseId;
					var url = 'appHttpService/valideNetCaseIsEvaluate.do';
					utils.ajax(url, function(data) {
						data = JSON.parse(data);
						if(data.state == 0) {					
							var evaluateFlag = data.evaluateFlag;	
							if(evaluateFlag != undefined && evaluateFlag == '1'){
								//该办件已经评价
								showTemplates('my_evaluate_detail.html','评价详情','_www/src/my/my_evaluate_detail.html?oid='+caseId);
							}else if(evaluateFlag != undefined && evaluateFlag == '0'){
								//该办件未评价
								openNewWin("_www/src/my/my_evaluate_case.html",null,'my_evaluate_case.html',{
								 	oid:caseId
								})
							}
						}
					}, param);
				}
			});
		</script>
	</body>
</html>
